<template>
  <div class="container">
    <div class="ms-login">
      <div class="login-avatar">
        <el-avatar
            :size="75"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        ></el-avatar>
      </div>
      <div class="login-form">
        <el-form
            ref="register"
            :model="register"
            :rules="rules">
          <el-form-item prop="email">
            <el-input
                v-model="register.email"
                prefix-icon="el-icon-user"
                placeholder="邮箱">
            </el-input>
          </el-form-item>
          <div>
            <el-form-item prop="password">
              <el-input
                  v-model="register.password"
                  type="password"
                  prefix-icon="el-icon-lock"
                  placeholder="密码">
              </el-input>
            </el-form-item>
            <el-form-item prop="confirmPassword">
              <el-input
                  v-model="register.confirmPassword"
                  type="password"
                  prefix-icon="el-icon-lock"
                  placeholder="确认密码">
              </el-input>
            </el-form-item>
            <el-form-item id="verify-input" prop="authCode">
              <el-input
                  v-model="register.authCode"
                  prefix-icon="el-icon-check"
                  placeholder="验证码">
              </el-input>
              <div class="auth-btn">
                <el-button
                    @click="sendAuthCode"
                    v-show="!showTime">
                  验证码
                </el-button>
                <el-button v-show="showTime" disabled>
                  {{ countdown }}
                </el-button>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!-- 笔记本上的字 -->
      <div class="login-btn">
        <el-button type="primary" @click="submitForm">注册</el-button>
      </div>
      <div class="register-a">
        <router-link :to="{name:'UserLogin'}">
          <a>登录</a>
        </router-link>
      </div>
    </div>
      <div id="7w9-5h">
        <div class="lib-comp-text" style="overflow: hidden; opacity: 0.63;">
          <div class="atom-comp-text normal wrap preview" style="font-size: 52px; font-family: KaiTi_GB2312, KaiTi, STKaiti; text-align: left; color: rgb(0, 0, 0); white-space: pre-wrap; letter-spacing: 0px; word-break: break-word; line-height: 134px; transform-origin: left top; transform: scale(0.5); transition: unset; position: absolute; top: 0; left: 0; width: 398px; min-width: 398px;">
            <span style="color:rgb(0, 0, 0)">“笔迹即脑迹”</span><div><br></div>
          </div>
        </div>
      </div>
      <div id="7w9-5i">
        <div class="lib-comp-text" style="overflow: hidden; opacity: 0.63;">
          <div style="font-size: 52px; font-family: KaiTi_GB2312, KaiTi, STKaiti,serif; text-align: left; color: rgb(0, 0, 0); white-space: pre-wrap; letter-spacing: 0px; word-break: break-word; line-height: 134px; transform-origin: left top; transform: scale(0.5); transition: unset; position: absolute; top: 0; left: 0; width: 494px; min-width: 494px;">
            <div>探寻笔迹中的性格<br></div>
          </div>
      </div>
    </div>
    <!--系统名称-->
    <div class="system-name" id="system-div">
      <div class="system-name-text"><span>笔 迹 性 格</span></div>
      <div class="system-name-text"><span>分 析 系 统</span></div>
    </div>
  </div>
</template>


<script>
  import Common from "@/api/common";

  export default {

    data() {
      const validateCheckPass = (rule,value,callback) => {
        if (value === "") {
          callback(new Error("请输入确认密码"));
        } else if (value !== this.register.password) {
          callback(new Error("两次输入密码不一致！"));
        } else {
          callback();
        }
      };
      const validPassword=(rule,value,callback)=>{
        let reg= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
        if(!reg.test(value)){callback(new Error('密码必须是由8-20位字母+数字组合'))
        }else{
          callback()
        }
      }
      return {
        /* 布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
        showTime: false,
        disableCodeBtn: false,
        // 倒计时，1分钟内只能发送一次邮件
        countdown: 60,
        timer: null,
        register: {
          email: null,
          password: null,
          confirmPassword: null,
          authCode: null
        },
        user: {
          account: null,
          email: null,
          password: null,
        },
        // 格式校验
        rules: {
          email: [
            { required: true, message: "请输入邮箱", trigger: "blur" },
          ],
          password: [
            { required: true, message: "请输入密码", trigger: "blur" },
            {validator: validPassword, trigger: "blur"}
          ],
          confirmPassword: [
            {required: true, message: "请输入确认密码", trigger: "blur"},
            {validator: validateCheckPass, trigger: "blur"}
          ],
          authCode: [
            {required: true, message: "请输入验证码", trigger: "blur"}
          ]
        }
      }
    },
    created() {

    },
    methods: {
      init() {

      },
      // 注册
      submitForm() {
        this.user.email = this.register.email
        this.user.password = this.register.password
        Common.register(this.user, this.register.authCode).then((response) => {
          this.$message({
            type: 'success',
            message: '注册成功'
          })
          // 注册成功后跳转到的登录页面
          this.$router.push({name:'UserLogin',params: {email: this.user.email}})
        }).catch((response) => {
          this.$message({
            type: 'error',
            message: '注册失败 ' + response.message
          })
        })
      },
      // 发送注册验证码
      sendAuthCode() {
        if (this.register.email == null) {
          this.$message({
            type: 'warning',
            message: '请输入邮箱！'
          })
          return;
        }
        // 固定倒计时时间，60秒
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.countdown = TIME_COUNT
          this.showTime = TIME_COUNT;
          this.showTime = true;
          this.timer = setInterval(() => {
            if (this.countdown > 0 && this.countdown <= TIME_COUNT) {
              this.countdown--;
              sessionStorage.setItem("countdownTime", this.countdown);
            } else {
              this.showTime = false;
              // 清除定时器
              clearInterval(this.timer);
              this.timer = null;
              sessionStorage.setItem("countdownTime", null);
            }
          }, 1000)
        }

        Common.sendRegisterCode(this.register.email).then((response) => {
          this.$message({
            type: 'success',
            message: '验证码已发送至您的邮箱！'
          })
          return response;
        }).catch(response => {
          this.$message({
            type: 'success',
            message: response.message
          })
        })

      }
    }
  }
</script>

<style scoped>
  a {
    text-decoration: none;
  }
  /*正常的未被访问过的链接*/
  a:link {
    color: rgb(64, 233, 255);
  }
  /*已经访问过的链接*/
  a:visited {
    text-decoration: none;
  }
  /*鼠标划过(停留)的链接*/
  a:hover {
    color: rgb(64, 128, 255);
  }
  /* 正在点击的链接，鼠标在元素上按下还没有松开*/
  a:active {
    text-decoration: none;
  }

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../../assets/img/login-bg.png);
    background-size: 100%;
  }

  .ms-login {
    position: absolute;
    left: 12%;
    top: 21%;
    width: 370px;
    height: 520px;
    border-radius: 28px;
    box-shadow:4px 4px 15px #6d6a6a;
    background: rgb(250, 250, 250);
    /*overflow: hidden;*/
  }
  .ms-content {
    padding: 30px 30px;
  }
  .login-btn {
    text-align: center;
  }
  .login-btn button {
    width: 128px;
    height: 42px;
    margin-top: 15px;
  }
  .login-avatar {
    height: 150px;
    /*水平垂直居中*/
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .login-form {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .el-form {
    /*取消浮动，否者输入框会变为行内元素*/
    /*display: flex;*/
    justify-content: center;
    align-items: center;
  }
  .el-input {
    width: 280px;
  }
  /*系统名*/
  .system-name {
    position: absolute;
    width: 230px;
    height: 160px;
    left: 54%;
    top: 7%;
    border-width: 1px;
    border-color: rgb(0, 151, 136);
    /*如果使用opacity: 设置透明度，那么子元素也会透明，即使子元素设置了不透明也依旧透明，可以设置背景色透明*/
    /*opacity: 1;*/
    background: rgba(245, 235, 235, 0.11);
    border-style: solid;
    border-radius: 44px;
  }

  .system-name-text {
    opacity: 1;
    text-align: center;
    line-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Microsoft YaHei", 微软雅黑, -apple-system, BlinkMacSystemFont, "PingFang SC", Helvetica, Tahoma, Arial, sans-serif;
    color: rgb(255, 255, 255);
    font-size: 40px;
  }

/* 字*/
  #\37 w9-5i {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", Helvetica, Tahoma, Arial, "Microsoft YaHei", 微软雅黑, sans-serif;
    font-size: 13px;
    color: inherit;
    -webkit-box-direction: normal;
    fill: rgb(255, 255, 255);
    position: absolute;
    box-sizing: border-box;
    min-width: 1px;
    min-height: 1px;
    cursor: inherit;
    pointer-events: auto;
    user-select: text;
    transform: translate(555px, 437px) rotate(356deg) scale(0.8, 0.8);
    width: 247px;
    height: 56px;
    transition: unset;
    z-index: 0;
  }
  #\37 w9-5h {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", Helvetica, Tahoma, Arial, "Microsoft YaHei", 微软雅黑, sans-serif;
    font-size: 13px;
    color: inherit;
    -webkit-box-direction: normal;
    fill: rgb(255, 255, 255);
    position: absolute;
    box-sizing: border-box;
    min-width: 1px;
    min-height: 1px;
    cursor: inherit;
    pointer-events: auto;
    user-select: none;
    transform: translate(556px, 387px) rotate(358deg) scale(0.8, 0.8);
    width: 199px;
    height: 56px;
    transition: unset;
    z-index: 0;
  }
  .register-a {
    display: inline;
    font-size: 13px;
    position: absolute;
    bottom: 17px;
    right: 17px;
  }
  .forget-a {
    position: absolute;
    right: 0;
    text-align:right;
    display: inline;
    font-size: 13px;
  }
  #verify-input .el-input{
    width: 160px;
  }
  #verify-input {
    display: flex;
  }
  .auth-btn {
    display: inline;
    position: absolute;
    right: 0;
  }
</style>